<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-checkbox"
		:class="_classes"
		:style="_styles"
		:hover-class="$attrs.hoverClass || $attrs['hover-class']"
	>
		<view class="pure-checkbox__box">
			<view class="pure-checkbox__icon">
				<pure-icon
					:name="iconName"
					:mode="$attrs.iconMode || $attrs['icon-mode']"
				></pure-icon>
			</view>
		</view>
		<view class="pure-checkbox__label" v-if="label || $slots.default">
			<slot>{{ label }}</slot>
		</view>
		<checkbox
			class="pure-checkbox__radio"
			:value="value"
			@tap="handleClick"
			:checked="_checked"
			:disabled="disabled"
		/>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed, inject } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Injects
// **************************************************************************************************************
// PureCheckboxGroup选中值
const PureCheckboxGroupModelValue = inject(
	"PureCheckboxGroupModelValue",
	ref(null)
);
// 表单项 change 事件
const PureFormItemOnChange = inject("PureFormItemOnChange", null);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits(["update:modelValue"]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 选中
	if (_checked.value) array.push("pure-checkbox--checked");

	// 只读
	if (_props.readonly) array.push("pure-checkbox--readonly");

	// 禁用
	if (_props.disabled) array.push("pure-checkbox--disabled");

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];
	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************
// 选中状态
const _checked = computed(() => {
	// 单独使用
	if (_props.alone) return _props.modelValue;
	return PureCheckboxGroupModelValue?.value?.includes?.(_props?.value);
});

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
// 点击事件
function handleClick() {
	// 单独使用
	if (_props.alone) {
		_emits("update:modelValue", !_props.modelValue);

		// 向表单项提交 change 事件
		PureFormItemOnChange?.();
	}
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
